<template>
	<!-- 登录 login -->
	<view class="login" :style="{height: Wheight + 'px'}">
		<view class="banner">
			<view class="register" @click="register">注册</view> 
			<view class="title-versions">
				<view class="title">{{config.title}}</view>
				<view class="versions">{{config.versions}}</view>
			</view>
		</view>
		<view class="input-box">
			<view class="box-size">
				<view class="phone border-bottom">
					<view class="black-line">
						<image class="icon" src="/static/images/phone.png" mode=""></image>
						<input 
							type="number" 
							placeholder="手机号码" 
							v-model="phoneNumber" 
							placeholder-class="pstyle"
						/>
					</view>
				</view>
				<view class="password border-bottom">
					<view class="black-line">
						<image class="icon" src="/static/images/password.png" mode=""></image>
						<input 
							type="'text'" 
							placeholder="默认密码为手机号后六位"
							v-model="password"
							:password="!passwordShows"
							placeholder-class="pstyle"
							/>
						<image 
							class="eye" 
							v-show="password" 
							@click="cut" 
							:src=" passwordShows ? '/static/images/closeeye.png' : '/static/images/eye.png'" 
						>
						</image>
					</view>
				</view>
				<view class="login-in">
					<button 
						type="primary"
						:disabled="loginClick"
						@click="login"
					>
					登录
					</button>
				</view>
				<view class="other">
					<text @click="unbind">解绑</text>
					<text @click="register">忘记密码?</text>
				</view>
			</view>
		</view>
		<view class="news">@2021拓客桥</view>
		<!-- 解绑对话框 -->
		<uni-popup ref="unbindDialog" type="dialog">
			<uni-popup-dialog 
				:type="msgType" 
				title="" 
				:content="content" 
				:before-close="true" 
				@confirm="dialogConfirm" 
				@close="dialogClose" 
			/>
		</uni-popup>	
	</view>
</template>

<script>
/**
 *  config: 基础信息
*/
export default {
	data() {
		return {
			title: 'Hello',
			phoneNumber: '', //手机号
			password: '', //密码
			passwordShows: false,  //密码是否显示
			Wheight: '', //可视区域高度
			popupMessage: false,
			popupDialog: false,
			message: '成功消息提醒',
			msgType: 'info',
			content: '一个月内只有2次修改绑定机会确定要解绑吗？',
			unbindDialog: '',  //存弹框的 ref 元素
		}
	},
	
	onLoad() {  
		uni.hideTabBarRedDot({index: 1})
		this.Wheight = this.$store.state.ContentHeight;
	},
	onReady() {
	}, 
	computed: {
		loginClick() {
			return this.phoneNumber && this.password == '';
		}
	},
	methods: {
		//跳转注册页面
		register(){
			uni.navigateTo({
				url: '/pages/login/register',
			});
		},
		//切换密码显示隐藏
		cut() {
			this.passwordShows  = !this.passwordShows;
		},
		// 登录
		login() {
			if(this.phoneNumber && this.password) {
				let params = {
					account: this.phoneNumber,
					password: this.password
				}
				this.$post(this.api.login, params).then((res) => {
					if(res.code == 0) {
						// setTimeout(function() {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						// }, 2000)
					}else {
						console.log(res);
						this.$store.commit('getUserInfo', res.data.userinfo);
						uni.switchTab({
							url: '/pages/index/index',
						});
					}
					
				}).catch((err) => {
					console.log(err);
					
				})
			}
			
		},
		//解绑
		unbind() {
			this.unbindDialog = this.$refs['unbindDialog']
			this.unbindDialog.open();
		},
		//点击确认
		dialogConfirm() {
			this.unbindDialog.close()
		},
		//点击取消
		dialogClose() {
			this.unbindDialog.close()
		}
	}
}
</script>

<style lang="less" scoped>
	@import url('@/static/style/login/login.less');
</style>
